[#include "/includes/_layout.html"/]
[#macro script_import]
<script type="text/javascript" src="${webctx}/resources/js/jquery.lSelect.js"></script>
[/#macro]
[#macro css_import]
<link rel="stylesheet" type="text/css" href="${webctx}/resources/css/product.css"/>
[/#macro]
[@layout]
<div class="wrapper wrapper-content">
	<div class="row animated fadeInLeft">
	[#include "/includes/menu-store.html" /]
	<div class="col-sm-11">
	<div class="row ibox-content">
		<form id="shopForm" class="form-horizontal" style="padding-top: 10px;">
			<div>
				<input type="hidden" id="id" name="id" value="${shop.id}"/>
				[#if authUser??]
				<div class="form-group">
		            <label class="col-md-2 control-label">店铺url地址</label>
		            <div class="col-md-5">
		                <input type="text" class="form-control" style="width: 400px" value="${authConfig.wx_domain}" readonly="readonly"/>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-md-2 control-label">店铺二维码</label>
		            <div class="col-md-5">
		                <img style="width: 120px;height: 120px;" src="${webctx}/qrcode/genio/?url=${authConfig.wx_domain}"/>
		            </div>
		        </div>					
				[/#if]
				<div class="form-group">
		            <label class="col-md-2 control-label">店铺名称<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-5" id="error_shop_name">
		                <input type="text" id="shop_name" name="shop_name" class="form-control" style="width: 400px" value="${shop.shop_name}"/>
		                <label class="control-label" for="shop_name"></label>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-md-2 control-label">店铺logo<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-5">
		               <ul class="js-picture-logo app-image-list">
						   <li><a href="javascript:;" onclick="addPictureLogo(true);" class="add-goods js-add-picture show">+加图</a></li>
						   [#if shop ??]
						   <li class="sort">
                               <img src="${img_domain}${shop.shop_logo}" id="shop_logo"  class="js-img-preview"/>
                               <input id="shopLogo" name="shop_logo" value="${shop.shop_logo}" type="hidden"  class="js-img-preview"/>
                               <a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a>
	                       </li>
						   [/#if]
					  </ul>
					   <label id="logo_error_msg" style="color:red;"></label>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-md-2 control-label">店招<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-5" id="error_addr">
		               <ul class="js-picture-sign app-image-list">
						   <li><a href="javascript:;" onclick="addPictureSign(true);" class="add-goods js-add-picture show">+加图</a></li>
						   [#if shop ??]
						   <li class="sort">
	                           <img src="${img_domain}${shop.shop_sign}" id="shop_sign"  class="js-img-preview"/>
	                           <input id="shopSign" name="shop_sign" value="${shop.shop_sign}" type="hidden"  class="js-img-preview"/>
	                           <a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a>
	                       </li>
						   [/#if]
					  </ul>
					   <label id="sign_error_msg" style="color:red;"></label>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-md-2 control-label">联系人<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-5" id="error_shop_contact">
		                <input type="text" id="shop_contact" name="shop_contact" class="form-control" style="width: 400px" value="${shop.shop_contact}"/>
		                <label class="control-label" for="shop_contact"></label>
		            </div>
		        </div>
		        <div class="form-group">
		            <label class="col-md-2 control-label">联系人手机<span style="color: red;"><em>*</em></span></label>
		            <div class="col-md-5" id="error_shop_contact_phone">
		                <input type="text" id="shop_contact_phone" name="shop_contact_phone" class="form-control"  style="width: 400px" value="${shop.shop_contact_phone}"/>
		                <label class="control-label" for="shop_contact_phone"></label>
		            </div>
		        </div>
			</div>
			<div class="panel-default">
			  	<div class="panel-body" align="center">
					<button type="submit" class="btn btn-success btn-sm">保存</button>
			  	</div>
		  	</div>
	  	</form>
  	</div>
</div>
</div>
</div>
[/@layout]
<script type="text/javascript">
function addPictureLogo(obj){
	var params={};
	params.model=obj;
	obz.selectImage(params, function (ImgPath, ImgUrl) {
		 var newlistImg=ImgPath.split(",");
		 var newlistImgUrl=ImgUrl.split(",");
		 for (var i = 0; i < newlistImg.length; i++) {
			 if(obj){
				 var reValue=$(".js-picture-logo li").find("input[name='shop_logo']").val();
				  if (typeof(reValue)== "undefined"){
					  $(".js-picture-logo").append('<li class="sort"><img src="'+newlistImg[i]+'" id="shop_logo"  class="js-img-preview">'
								 +'<input name="shop_logo" id="shopLogo" value="'+newlistImgUrl[i]+'" type="hidden"  class="js-img-preview">'
								 +'<a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a></li>');
				 }else{
					  $("#shop_logo").attr('src',newlistImg[i]);
					  $(".js-picture-logo li").find("input[name='shop_logo']").val(newlistImgUrl[i]);
				  } 				 
			  } 
		 }
		 $(".col-md-5 ul>li").hover(function(){
				$(this).find("a").removeClass("hide");
			   $(this).find("a").addClass("hover");
			},function(){
				 $(this).find("a").addClass("hide");  
				 $(this).find("a").removeClass("hover");
			});
	});
}

function addPictureSign(obj){
	var params={};
	params.model=obj;
	obz.selectImage(params, function (ImgPath, ImgUrl) {
		 var newlistImg=ImgPath.split(",");
		 var newlistImgUrl=ImgUrl.split(",");
		 for (var i = 0; i < newlistImg.length; i++) {
			 if(obj){
				 var reValue=$(".js-picture-sign li").find("input[name='shop_sign']").val();
				  if (typeof(reValue)== "undefined"){
					  $(".js-picture-sign").append('<li class="sort"><img src="'+newlistImg[i]+'" id="shop_sign"  class="js-img-preview">'
								 +'<input name="shop_sign" id="shopSign" value="'+newlistImgUrl[i]+'" type="hidden"  class="js-img-preview">'
								 +'<a class="js-delete-picture close-modal small hide" onclick="deleteImg(this);">×</a></li>');
				 }else{
					  $("#shop_sign").attr('src',newlistImg[i]);
					  $(".js-picture-sign li").find("input[name='shop_sign']").val(newlistImgUrl[i]);
				  } 				 
			  } 
		 }
		 $(".col-md-5 ul>li").hover(function(){
				$(this).find("a").removeClass("hide");
			   $(this).find("a").addClass("hover");
			},function(){
				 $(this).find("a").addClass("hide");  
				 $(this).find("a").removeClass("hover");
			});
	});
}
function deleteImg(obj){
	$(obj).parent().remove();
}
</script>
<script type="text/javascript">
$().ready(function() {
	$(".col-md-5 ul>li").hover(function(){
		$(this).find("a").removeClass("hide");
	   $(this).find("a").addClass("hover");
	},function(){
		 $(this).find("a").addClass("hide");  
		 $(this).find("a").removeClass("hover");
	});
	
	// validate signup form on keyup and submit
	var icon = "<i class='fa fa-times-circle'></i> ";
    $("#shopForm").validate({
    	//debug:true,
    	errorElement: "em",
        success: function(em) {
            em.text("").addClass("success");//验证通过的动态CSS
        },
        submitHandler:function() {
        	$("#shopForm").mask("正在保存...");
        	$.post(obz.ctx+"/shop/saveShop", $("#shopForm").serialize(), function(json) {
        		$("#shopForm").unmask();
    			if(json.code!=200){
    				obz.error(json.msg);
    			}else{
    				obz.msg('保存成功', function(){
    					location.reload();
    				});					
    			}
    		},"json");
        },
        rules: {
        	shop_name: "required", shop_logo: "required", shop_sign: "required", shop_contact: "required", shop_contact_phone: "required"
        },
        messages: {
        	shop_name: icon + "请输入店铺名称", shop_logo: icon + "请上传店铺LOGO", shop_sign: icon + "请上传店招", shop_contact: icon + "请输入联系人", shop_contact_phone: icon + "请输入联系人手机"
        }
    });
});
</script>
<script type="text/javascript">
	Template.init("#menu-shop");
	Template.initSecond("#menu-info");
</script>
</body>
</html>